import React from "react"
import { connect } from "dva"
import styles from "@styles/login.less"
import { Card, Form, Input, Button, message } from 'antd'
import logoIcon from '../assets/logo.jpg'

const FormItem = Form.Item
@connect(({ loading }) => ({
  submiting: loading.effects['login/login']
}))
class LoginForm extends React.Component {
  handleSubmit = () => {
    const { validateFields } = this.props.form
    const { dispatch } = this.props
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'login/login',
          payload: {
            ...values
          }
        })
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form
    const { submiting } = this.props
    return(
      <Form onSubmit={this.handleSubmit}>
        <FormItem hasFeedback>
          {getFieldDecorator('username', {
            rules: [
              {
                required: true,
                message: '请填写用户名',
              },
            ],
          })(<Input size="large" onPressEnter={this.handleSubmit} placeholder="用户名"/>)}
        </FormItem>
        <FormItem hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: '请填写密码',
              },
            ],
          })(<Input size="large" type="password" onPressEnter={this.handleSubmit} placeholder="密码"/>)}
        </FormItem>
        <Button onClick={this.handleSubmit} loading={submiting} style={{ width: '100%' }} type="primary" size="large">
          登录
        </Button>
      </Form>
    )
  }
}

const WrappedNormalLoginForm = Form.create()(LoginForm)


class LoginPage extends React.Component {
  doLogin = () => {
    const {dispatch} = this.props
    dispatch({
      type: 'example/login',
      payload: {username: 'admin', password: '123456'}
    })
  }

  render() {
    return (
      <div className={styles.normal}>
        <div className={styles.bg}/>
        <Card
          className={styles.box}
          bordered={false}
          style={{ maxWidth: 350 }}
        >
          <div className={styles.logo}><img src={logoIcon} alt=""/></div>
          <WrappedNormalLoginForm/>
        </Card>
      </div>
    )
  }

}

export default connect(state => state)(LoginPage)
